<template>
  <el-dialog :append-to-body="true" :close-on-click-modal="false" :visible.sync="dialog" style="top:5px;" title="物料选择列表" width="80%">
    <div style="height:530px;display:flex">
      <div style="width:260px">
        <el-input
          v-model="filterItemCategory"
          clearable
          placeholder="输入关键字进行过滤" />
        <el-tree
          ref="itemCategoryTree"
          :data="itemCategoryTreeData"
          :props="{children: 'children', label: 'catName', hasChildren: 'hasChildren'}"
          :filter-node-method="filterItemCategoryNode"
          :highlight-current="true"
          node-key="id"
          default-expand-all
          @node-click="handleItemCategoryTreeClick"
        >
          <span slot-scope="{ node, data }">
            <svg-icon icon-class="image"/>
            {{ data.catName }}
          </span>
        </el-tree>
      </div>
      <!--表格渲染-->
      <DataGridTable
        v-loading="loading"
        :sup_this="sup_this"
        :data="data.rtnList"
        :total="total"
        :multi-select="false"
        :show-row-number="true"
        :all-define-columns="['catName','itemName','itemBrand','itemSpec','customCode','stockUnit','safetyStock','taxRate','itemType','saleFlag']"
        grid-id="baseItemSelectListGridId"
        table-ref="baseItemTable"
        @row-dblclick="doSubmit2click"
        @current-change="handleCurrentChange">
        <el-table-column v-if="multiSelect" prop="id" width="90px">
          <template slot="header" slot-scope="scope">
            <el-checkbox v-model="checkAll" @change="handleCheckAllChange" />
          </template>
          <template slot-scope="scope">
            <el-button v-if="selectedRows[scope.row.id]" type="danger" @click="itemCheckSelectChange(scope.row)">取消</el-button>
            <el-button v-else type="primary" @click="itemCheckSelectChange(scope.row)">选择</el-button>
          </template>
        </el-table-column>
        <DataGridColumn prop="itemCode" label="编码" width="110" />
        <DataGridColumn slot="itemName" prop="itemName" label="名称" width="160" />
        <DataGridColumn slot="catName" prop="catName" label="物料类别" />
        <DataGridColumn slot="itemSpec" prop="itemSpec" label="规格" />
        <DataGridColumn slot="itemBrand" prop="itemBrand" label="品牌" />
        <DataGridColumn slot="customCode" prop="customCode" label="客户编码" />
        <DataGridColumnDict slot="stockUnit" :dicts="dicts.item_unit" prop="stockUnit" label="单位"/>
        <DataGridColumn slot="safetyStock" prop="safetyStock" label="安全库存" />
        <DataGridColumn slot="taxRate" prop="taxRate" label="税率" />
        <DataGridColumnDict slot="itemType" :dicts="dicts.item_type" prop="itemType" label="物料属性"/>
        <DataGridColumn slot="saleFlag" prop="saleFlag" label="销售品" />
      </DataGridTable>
    </div>
    <div slot="footer" class="modal-footer">
      <el-input v-model="paramBean.itemCode" clearable placeholder="输入物料编号" style="width: 200px;" size="mini" class="filter-item" @keyup.enter.native="sup_this.toQuery"/>
      <el-input v-model="paramBean.itemName" clearable placeholder="输入物料名称" style="width: 200px;" size="mini" class="filter-item" @keyup.enter.native="sup_this.toQuery"/>
      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="sup_this.toQuery">搜索</el-button>
      <el-button @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit">确认选择</el-button>
    </div>
  </el-dialog>
</template>
<script>
import initData from '@/mixins/initData'
import baseItem from '@/api/base/BaseItem'
import { getItemCategoryTreeByCpyCode } from '@/api/base/itemCategory'
import { parseTime } from '@/utils/index'

export default {
  mixins: [initData],
  dictTypes: ['item_lot_type', 'item_type', 'item_unit'],
  props: {
    multiSelect: {
      default: false,
      requried: false,
      type: Boolean
    }
  },
  data() {
    return {
      loading: false,
      dialog: false,
      selectedRows: [],
      selectedRow: {},
      sup_this: this,
      itemCategoryTreeData: [],
      filterItemCategory: '',
      checkAll: false
    }
  },
  watch: {
    filterItemCategory(val) {
      const _thisTree = this.$refs.itemCategoryTree
      if (_thisTree) {
        _thisTree.filter(val)
      }
    }
  },
  created() {
    getItemCategoryTreeByCpyCode('').then(res => {
      this.itemCategoryTreeData = res.data
      const allObject = { id: '', catName: '+所有类别' }
      this.itemCategoryTreeData.unshift(allObject)
    })
    this.url = baseItem.loadDataUrl()
  },
  mounted() {
  },
  methods: {
    parseTime,
    initLoadData() {
      this.checkAll = false
      this.selectedRows = []
      this.selectedRow = {}
      this.init()
      this.dialog = true
    },
    async beforeInit() {
      return true
    },
    afterInit(res) {
    },
    itemFilterQuery() {
      this.init()
    },
    handleSelectionChange(val) {
      this.selectedRows = val
    },
    doSubmit() {
      this.loading = true
      if (this.multiSelect) {
        const _selectRows = this.selectedRows
        const tmpKeys = Object.keys(_selectRows)
        const tmpRows = []
        for (const tmpKey of tmpKeys) {
          tmpRows.push(_selectRows[tmpKey])
        }
        this.$emit('itemSelectCallback', tmpRows, this)
      } else {
        this.$emit('itemSelectCallback', this.selectedRow, this)
      }
    },
    cancel() {
      this.dialog = false
      this.loading = false
    },
    doSubmit2click() {
      if (!this.multiSelect) {
        this.$emit('itemSelectCallback', this.selectedRow, this)
      }
    },
    handleCurrentChange(val) {
      this.selectedRow = val
    },
    handleCheckAllChange(isChecked) {
      const tmpSelectRows = this.selectedRows
      if (isChecked) {
        this.data.rtnList.forEach(row => {
          tmpSelectRows[row.id] = row
        })
      } else {
        // 取消
        this.data.rtnList.forEach(row => {
          delete tmpSelectRows[row.id]
        })
      }
      this.selectedRows.splice(this.selectedRows.length)
      // this.trees[idx] = 'x' // 无响应
      // this.$set(this.trees,idx,'x') // 有响应
      // this.trees.splice(idx,1,'x') // 有响应
    },
    itemCheckSelectChange(row) {
      if (!this.selectedRows[row.id]) {
        // 选择
        this.selectedRows[row.id] = row
      } else {
        delete this.selectedRows[row.id]
      }
      this.selectedRows.splice(this.selectedRows.length)
    },
    handleItemCategoryTreeClick(data) {
      this.paramBean.catId = data.id
      this.init()
    },
    filterItemCategoryNode(value, data) {
      if (!value) return true
      return data.catName.indexOf(value) !== -1
    }
  }
}
</script>
<style lang="scss" scoped>
  .el-tree {
    overflow: auto;
    height: calc(100% - 0px);
    >.el-tree-node {
      /*设置横向滚动条*/
      min-width: 100%;
      display: inline-block;
    }
  }
  .modal-footer {
    float: right;
    position: absolute;
    right: 30px;
    top: 5px;
    text-align: center;
    margin-right: 30px;
    background: initial;
    z-index: 10;
    border-top: 1px solid #f7fafc;
    height: 40px;
    line-height: 40px;
    min-height: 40px;
    border-radius: 3px;
  }
</style>
